import * as React from "react"
import { Image, ImageStyle, View, ViewStyle } from "react-native"
import Swiper, { SwiperProps } from "react-native-web-swiper"
import { px2dp } from "../../utils"

interface BannerProps {
  imgItems: any[]
  options?: Record<string, any>
}

// const dotStyle: ViewStyle = {
//   backgroundColor: "#fff",
//   width: px2dp(12),
//   height: px2dp(4),
//   marginLeft: px2dp(2),
//   marginRight: px2dp(2)
// }

const paginationStyle: ViewStyle = {
  justifyContent: "flex-start",
  alignItems: "flex-end",
  marginLeft: px2dp(13),
  bottom: px2dp(6)
}

const dotActiveStyle: ViewStyle = {
  backgroundColor: "#CF2A2A",
  width: px2dp(26)
}

const itemStyle: ImageStyle = {
  width: px2dp(375),
  height: px2dp(212)
}

export default function Banner(props: BannerProps) {
  const { imgItems } = props
  const bannerItems = imgItems.map((img, i) => {
    return (
      <View key={i}>
        <Image style={itemStyle} source={img} />
      </View>
    )
  })

  const options: SwiperProps = {
    loop: true,
    minDistanceForAction: 0.1,
    springConfig: { speed: 11 },
    controlsProps: {
      dotActiveStyle: { ...dotActiveStyle },
      dotsWrapperStyle: { ...paginationStyle },
      dotsTouchable: true,
      dotsPos: "bottom-left",
      prevPos: false,
      nextPos: false
    }
  }

  return (
    <View style={{ height: px2dp(212), width: px2dp(375) }}>
      <Swiper {...options}>{bannerItems}</Swiper>
    </View>
  )
}
